
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Less &#x6269;&#x5145;&#x4E86; CSS &#x8BED;&#x8A00;&#xFF0C;&#x589E;&#x52A0;&#x4E86;&#x8BF8;&#x5982;&#x53D8;&#x91CF;&#x3001;&#x6DF7;&#x5408;&#xFF08;mixin&#xFF09;&#x3001;&#x8FD0;&#x7B97;&#x3001;&#x51FD;&#x6570;&#x7B49;&#x3002;  Less &#x65E2;&#x53EF;&#x4EE5;&#x8FD0;&#x884C;&#x5728;&#x670D;&#x52A1;&#x5668;&#x7AEF;&#xFF08;Node.js &#x548C; Rhino &#x5E73;&#x53F0;&#xFF09;&#x4E5F;&#x53EF;&#x4EE5;&#x8FD0;&#x884C;&#x5728;&#x5BA2;&#x6237;&#x7AEF;&#xFF08;&#x6D4F;&#x89C8;&#x5668;&#xFF09;&#x3002;
">
    <meta name="keywords" content="Less,Lesscss,CSS,SASS,sass-lang,&#x6837;&#x5F0F;&#x8868;,&#x9884;&#x5904;&#x7406;,&#x9884;&#x7F16;&#x8BD1;
">
    <meta name="author" content="The Core Less Team">

    <title>
        &#x5165;&#x95E8; | Less.js &#x4E2D;&#x6587;&#x6587;&#x6863;
    </title>

    <!-- Main styles -->
    <link href="public/css/index.css" rel="stylesheet">

    <!-- Webfonts -->
    <script type="text/javascript">
        WebFontConfig = {google: {families: ['PT+Sans:400,700,400italic,700italic', 'PT+Mono&subset=latin,cyrillic'] }};
        (function() {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- Favicons -->
    <link rel="shortcut icon" href="public/ico/favicon.ico">

</head>
<body class="index">

<header class="navbar navbar-inverse navbar-fixed-top docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="./#" class="navbar-brand" alt="Less">
                <img src="public/img/logo.png">
            </a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li>
                    <a href="features/">&#x8BED;&#x8A00;&#x7279;&#x6027;</a>
                </li>

                <li>
                    <a href="functions/">&#x51FD;&#x6570;&#x53C2;&#x8003;</a>
                </li>
                <li>
                    <a href="usage/">&#x7528;&#x6CD5;</a>
                </li>

            </ul>
            <ul class="nav navbar-nav navbar-right">

                <li>
                    <a href="about/">&#x5173;&#x4E8E;</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">GitHub <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li> <a href="https://github.com/less/less-docs">Docs Repo</a> </li>
                        <li> <a href="https://github.com/less/less-docs/issues?&amp;state=open">Docs Issues</a> </li>
                        <li class="divider"></li>
                        <li> <a href="https://github.com/less/less.js.git">Less.js Repo</a> </li>
                        <li> <a href="https://github.com/less/less.js/issues">Less.js Issues</a> </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>



<div class="docs-header" id="content">
    <div class="container">
        <h1>&#x5165;&#x95E8;</h1>
        <p>Less &#x7B80;&#x4ECB;&#x3001;&#x5982;&#x4F55;&#x4E0B;&#x8F7D;&#x5E76;&#x4F7F;&#x7528;&#x3001;&#x6848;&#x4F8B;&#x7B49;&#x3002;</p>

    </div>
</div>


<div class="banner">
    <div class="container">
        less v2.2.0 has been released -
        <strong>
            <a href="https://github.com/less/less.js/blob/master/CHANGELOG.md">See what&apos;s new</a>
        </strong>
    </div>
</div>



<div class="container docs-container">
    <div class="row">
        <div class="col-md-3">
            <div class="sidebar hidden-print" role="complementary">
                <div id="navigation">

                    <ul class="nav sidenav"><li><a href="#getting-started">&#x5165;&#x95E8;</a></li>
                        <li><a href="#using-less">&#x4F7F;&#x7528; Less</a><ul class="nav"><li><a href="#using-less-installation-">Installation &#xFF08;&#x5B89;&#x88C5;&#xFF09;</a></li>
                            <li><a href="#using-less-command-line-usage-">Command-line usage &#xFF08;&#x5728;&#x547D;&#x4EE4;&#x884C;&#x4E2D;&#x4F7F;&#x7528;&#xFF09;</a></li>
                            <li><a href="#using-less-usage-in-code-">Usage in Code &#xFF08;&#x5728;&#x4EE3;&#x7801;&#x4E2D;&#x4F7F;&#x7528;&#xFF09;</a></li>
                            <li><a href="#using-less-configuration-">Configuration &#xFF08;&#x914D;&#x7F6E;&#xFF09;</a></li>
                            <li><a href="#using-less-third-party-tools-">Third party tools &#xFF08;&#x7B2C;&#x4E09;&#x65B9;&#x5DE5;&#x5177;&#xFF09;</a></li></ul></li>
                        <li><a href="#command-line-with-rhino-rhino-">Command-line With Rhino &#xFF08;&#x4F7F;&#x7528;Rhino&#x547D;&#x4EE4;&#x884C;&#xFF09;</a></li>
                        <li><a href="#client-side-usage-">Client-side usage &#xFF08;&#x5728;&#x5BA2;&#x6237;&#x7AEF;&#x4E2D;&#x4F7F;&#x7528;&#xFF09;</a><ul class="nav"><li><a href="#client-side-usage--tips-">Tips &#x7279;&#x522B;&#x6CE8;&#x610F;</a></li>
                            <li><a href="#client-side-usage--browser-options-">Browser Options &#xFF08;&#x6D4F;&#x89C8;&#x5668;&#x7AEF;&#x8BBE;&#x7F6E;&#x53C2;&#x6570;&#xFF09;</a></li></ul></li>
                        <li><a href="#download-options">&#x83B7;&#x5F97; Less.js</a><ul class="nav"><li><a href="#download-options-browser-downloads">Browser downloads</a></li>
                            <li><a href="#download-options--less-cdn-cdnjs-cloudflare-com-ajax-libs-less-js-2-2-0-less-min-js-">Less CDN</a></li></ul></li>
                        <li><a href="#license-faqs">&#x8BB8;&#x53EF;&#x8BC1; FAQs</a></li></ul></div>
            </div>
        </div>
        <div class="col-md-9" role="main">

            <div class="panel docs-content">



                <div class="docs-section">
                    <div class="page-header">
                        <h1 class="docs-heading">&#x5165;&#x95E8;<span class="anchor-target" id="getting-started"></span>
                            <a href="#getting-started" name="getting-started" class="anchor glyphicon glyphicon-link"></a></h1>
                    </div>
                    <p>Less &#x662F;&#x4E00;&#x4E2A;Css &#x9884;&#x7F16;&#x8BD1;&#x5668;,&#x610F;&#x601D;&#x6307;&#x7684;&#x662F;&#x5B83;&#x53EF;&#x4EE5;&#x6269;&#x5C55;Css&#x8BED;&#x8A00;,&#x6DFB;&#x52A0;&#x529F;&#x80FD;&#x5982;&#x5141;&#x8BB8;&#x53D8;&#x91CF;(variables),&#x6DF7;&#x5408;(mixins),&#x51FD;&#x6570;(functions) &#x548C;&#x8BB8;&#x591A;&#x5176;&#x4ED6;&#x7684;&#x6280;&#x672F;&#xFF0C;&#x8BA9;&#x4F60;&#x7684;Css&#x66F4;&#x5177;&#x7EF4;&#x62A4;&#x6027;&#xFF0C;&#x4E3B;&#x9898;&#x6027;&#xFF0C;&#x6269;&#x5C55;&#x6027;&#x3002;</p>
                    <p>Less &#x53EF;&#x8FD0;&#x884C;&#x5728; Node &#x73AF;&#x5883;,&#x6D4F;&#x89C8;&#x5668;&#x73AF;&#x5883;&#x548C;Rhino&#x73AF;&#x5883;.&#x540C;&#x65F6;&#x4E5F;&#x6709;3&#x79CD;&#x53EF;&#x9009;&#x5DE5;&#x5177;&#x4F9B;&#x4F60;&#x7F16;&#x8BD1;&#x6587;&#x4EF6;&#x548C;&#x76D1;&#x89C6;&#x4EFB;&#x4F55;&#x6539;&#x53D8;&#x3002;</p>
                    <p>&#x4F8B;&#x5982;:</p>
<pre><code class="lang-less"><span class="hljs-variable">@base:</span> <span class="hljs-hexcolor">#f938ab</span>;

    <span class="hljs-class">.box-shadow</span>(<span class="hljs-variable">@style</span>, <span class="hljs-variable">@c</span>) <span class="hljs-keyword">when</span> (<span class="hljs-function">iscolor</span>(<span class="hljs-variable">@c</span>)) {
    <span class="hljs-attribute">-webkit-box-shadow</span>: <span class="hljs-variable">@style</span> <span class="hljs-variable">@c</span>;
    <span class="hljs-attribute">box-shadow</span>:         <span class="hljs-variable">@style</span> <span class="hljs-variable">@c</span>;
    }
    <span class="hljs-class">.box-shadow</span>(<span class="hljs-variable">@style</span>, <span class="hljs-variable">@alpha</span>: <span class="hljs-number">50%</span>) <span class="hljs-keyword">when</span> (<span class="hljs-function">isnumber</span>(<span class="hljs-variable">@alpha</span>)) {
    <span class="hljs-class">.box-shadow</span>(<span class="hljs-variable">@style</span>, <span class="hljs-function">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-variable">@alpha</span>));
    }
    <span class="hljs-class">.box</span> {
    <span class="hljs-attribute">color</span>: <span class="hljs-function">saturate</span>(<span class="hljs-variable">@base</span>, <span class="hljs-number">5%</span>);
    <span class="hljs-attribute">border-color</span>: <span class="hljs-function">lighten</span>(<span class="hljs-variable">@base</span>, <span class="hljs-number">30%</span>);
    <span class="hljs-tag">div</span> { <span class="hljs-class">.box-shadow</span>(<span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">5px</span>, <span class="hljs-number">30%</span>) }
    }
</code></pre>
                    <p>&#x7F16;&#x8BD1;&#x4E3A;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-class">.box</span> {
    <span class="hljs-attribute">color</span>: <span class="hljs-hexcolor">#fe33ac</span>;
    <span class="hljs-attribute">border-color</span>: <span class="hljs-hexcolor">#fdcdea</span>;
    }
    <span class="hljs-class">.box</span> <span class="hljs-tag">div</span> {
    <span class="hljs-attribute">-webkit-box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">5px</span> <span class="hljs-function">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.3</span>);
    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">5px</span> <span class="hljs-function">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.3</span>);
    }
</code></pre>

                </div>




                <div class="docs-section">
                    <div class="page-header">
                        <h1 class="docs-heading">&#x4F7F;&#x7528; Less<span class="anchor-target" id="using-less"></span>
                            <a href="#using-less" name="using-less" class="anchor glyphicon glyphicon-link"></a></h1>
                    </div>
                    <blockquote>
                        <p>Less&#x53EF;&#x4EE5;&#x901A;&#x8FC7;npm&#x5728;&#x547D;&#x4EE4;&#x884C;&#x4E0A;&#x4F7F;&#x7528;&#xFF0C;&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x811A;&#x672C;&#x6587;&#x4EF6;&#x6D4F;&#x89C8;&#x5668;&#x6216;&#x7528;&#x4E8E;&#x5E7F;&#x6CDB;&#x7684;&#x7B2C;&#x4E09;&#x65B9;&#x5DE5;&#x5177;&#x4E0B;&#x8F7D;&#x3002;&#x6709;&#x5173;&#x66F4;&#x591A;&#x8BE6;&#x7EC6;&#x4FE1;&#x606F;&#xFF0C; &#x53C2;&#x89C1; <a href="usage/index.html">&#x7528;&#x6CD5;</a> &#x90E8;&#x5206;&#x3002;</p>
                    </blockquote>
                    <h2 class="docs-heading">Installation &#xFF08;&#x5B89;&#x88C5;&#xFF09;<span class="anchor-target" id="using-less-installation-"></span>
                        <a href="#using-less-installation-" name="using-less-installation-" class="anchor glyphicon glyphicon-link"></a></h2>
                    <p>&#x5728; <a href="http://nodejs.org/">node.js</a> &#x4E2D;&#x5B89;&#x88C5;LESS&#x6700;&#x7B80;&#x5355;&#x7684;&#x65B9;&#x5F0F;&#x5C31;&#x662F;&#x4F7F;&#x7528;Node&#x5305;&#x7BA1;&#x7406;&#x5DE5;&#x5177;npm&#x6765;&#x5B89;&#x88C5;:</p>
<pre><code class="lang-bash">$ npm install -g less
</code></pre>
                    <h2 class="docs-heading">Command-line usage &#xFF08;&#x5728;&#x547D;&#x4EE4;&#x884C;&#x4E2D;&#x4F7F;&#x7528;&#xFF09;<span class="anchor-target" id="using-less-command-line-usage-"></span>
                        <a href="#using-less-command-line-usage-" name="using-less-command-line-usage-" class="anchor glyphicon glyphicon-link"></a></h2>
                    <p>&#x4E00;&#x65E6;&#x5B89;&#x88C5;&#x5B8C;&#x6210;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x5728;&#x547D;&#x4EE4;&#x884C;&#x4E2D;&#x8C03;&#x7528;&#xFF0C;&#x4F8B;&#x5982;:</p>
<pre><code class="lang-bash">$ lessc styles.less
</code></pre>
                    <p>&#x8FD9;&#x6837;&#x7684;&#x8BDD;&#x7F16;&#x8BD1;&#x540E;&#x7684;CSS&#x5C06;&#x4F1A;&#x8F93;&#x51FA;&#x5230; &apos;stdout&apos; &#x4E2D;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x9009;&#x62E9;&#x5C06;&#x8FD9;&#x4E2A;&#x8F93;&#x51FA;&#x91CD;&#x5B9A;&#x5411;&#x5230;&#x6587;&#x4EF6;&#x4E2D;:</p>
<pre><code class="lang-bash">$ lessc styles.less &gt; styles.css
</code></pre>
                    <p>&#x5982;&#x679C;&#x4F60;&#x60F3;&#x8F93;&#x51FA;&#x4E00;&#x4E2A;&#x538B;&#x7F29;&#x540E;&#x7684;CSS&#xFF0C;&#x53EA;&#x8981;&#x52A0;&#x5230; <code>-x</code> &#x9009;&#x9879;&#x5373;&#x53EF;&#x3002;&#x5982;&#x679C;&#x4F60;&#x60F3;&#x8981;&#x66F4;NB&#x7684;&#x538B;&#x7F29;&#xFF0C;&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x9009;&#x62E9;&#x4F7F;&#x7528; <a href="https://github.com/GoalSmashers/clean-css">Clean CSS</a>
                        &#x538B;&#x7F29;&#x5668;&#xFF0C;&#x53EA;&#x8981;&#x52A0;&#x4E0A; <code>--clean-css</code> <a href="https://github.com/less/less-plugin-clean-css">&#x63D2;&#x4EF6;</a>&#x5373;&#x53EF;&#x3002;</p>
                    <p>&#x76F4;&#x63A5;&#x8FD0;&#x884C;lessc&#xFF0C;&#x4E0D;&#x5E26;&#x4EFB;&#x4F55;&#x53C2;&#x6570;&#x5C06;&#x53EF;&#x4EE5;&#x770B;&#x5230;&#x6240;&#x6709;&#x7684;&#x547D;&#x4EE4;&#x884C;&#x53C2;&#x6570;&#x6216; &#x67E5;&#x770B; <a href="usage/index.html">&#x7528;&#x6CD5;</a>.</p>
                    <h2 class="docs-heading">Usage in Code &#xFF08;&#x5728;&#x4EE3;&#x7801;&#x4E2D;&#x4F7F;&#x7528;&#xFF09;<span class="anchor-target" id="using-less-usage-in-code-"></span>
                        <a href="#using-less-usage-in-code-" name="using-less-usage-in-code-" class="anchor glyphicon glyphicon-link"></a></h2>
                    <p>&#x4F60;&#x53EF;&#x4EE5;&#x5728;Node&#x4E2D;&#x8C03;&#x7528;&#x7F16;&#x8BD1;&#x5668;&#xFF0C;&#x4F8B;&#x5982;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> less = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;less&apos;</span>);

    less.render(<span class="hljs-string">&apos;.class { width: (1 + 1) }&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e, output)</span> </span>{
    <span class="hljs-built_in">console</span>.log(output.css);
    });
</code></pre>
                    <p>&#x5C06;&#x4F1A;&#x8F93;&#x51FA;</p>
<pre><code class="lang-css"><span class="hljs-class">.class</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">2</span>;
    }
</code></pre>
                    <h2 class="docs-heading">Configuration &#xFF08;&#x914D;&#x7F6E;&#xFF09;<span class="anchor-target" id="using-less-configuration-"></span>
                        <a href="#using-less-configuration-" name="using-less-configuration-" class="anchor glyphicon glyphicon-link"></a></h2>
                    <p>&#x4F60;&#x53EF;&#x4EE5;&#x7ED9;&#x7F16;&#x8BD1;&#x5668;&#x4F20;&#x5165;&#x4E00;&#x4E9B;&#x53C2;&#x6570;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> less = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;less&apos;</span>);

    less.render(<span class="hljs-string">&apos;.class { width: (1 + 1) }&apos;</span>,
    {
    paths: [<span class="hljs-string">&apos;.&apos;</span>, <span class="hljs-string">&apos;./lib&apos;</span>],  <span class="hljs-comment">// Specify search paths for @import directives</span>
    filename: <span class="hljs-string">&apos;style.less&apos;</span>, <span class="hljs-comment">// Specify a filename, for better error messages</span>
    compress: <span class="hljs-literal">true</span>          <span class="hljs-comment">// Minify CSS output</span>
    },
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e, output)</span> </span>{
    <span class="hljs-built_in">console</span>.log(output.css);
    });
</code></pre>
                    <p>&#x67E5;&#x770B; <a href="usage/index.html">&#x7528;&#x6CD5;</a> &#x83B7;&#x53D6;&#x66F4;&#x591A;&#x4FE1;&#x606F;&#x3002;</p>
                    <h2 class="docs-heading">Third party tools &#xFF08;&#x7B2C;&#x4E09;&#x65B9;&#x5DE5;&#x5177;&#xFF09;<span class="anchor-target" id="using-less-third-party-tools-"></span>
                        <a href="#using-less-third-party-tools-" name="using-less-third-party-tools-" class="anchor glyphicon glyphicon-link"></a></h2>
                    <p>&#x6709;&#x5173;&#x5176;&#x4ED6;&#x5DE5;&#x5177;&#x8BE6;&#x7EC6;&#x4FE1;&#x606F;,&#x53C2;&#x89C1; <a href="usage/index.html">&#x7528;&#x6CD5;</a> &#x90E8;&#x5206;&#x3002;</p>
                    <h1 class="docs-heading">Command-line With Rhino &#xFF08;&#x4F7F;&#x7528;Rhino&#x547D;&#x4EE4;&#x884C;&#xFF09;<span class="anchor-target" id="command-line-with-rhino-rhino-"></span>
                        <a href="#command-line-with-rhino-rhino-" name="command-line-with-rhino-rhino-" class="anchor glyphicon glyphicon-link"></a></h1>
                    <blockquote>
                        <p>&#x6BCF;&#x4E2A; less.js &#x53D1;&#x5E03;&#x90FD;&#x5305;&#x542B;&#x4E86;&#x5BF9;&#x5E94;&#x7684;Rhino&#x547D;&#x4EE4;&#x884C;&#x7248;&#x672C;&#x3002;</p>
                    </blockquote>
                    <p>Rhino&#x547D;&#x4EE4;&#x884C;&#x7248;&#x672C;&#x9700;&#x8981;&#x4E24;&#x4E2A;&#x6587;&#x4EF6;:</p>
                    <ul>
                        <li>less-rhino-<version>.js - &#x7F16;&#x8BD1;&#x542F;&#x52A8;&#xFF0C;</version></li>
                        <li>lessc-rhino-<version>.js - &#x547D;&#x4EE4;&#x884C;&#x652F;&#x6301;&#x3002;</version></li>
                    </ul>
                    <p>Command to run the compiler:</p>
<pre><code>java -jar js.jar -f less-rhino-&lt;version&gt;.js lessc-rhino-&lt;version&gt;.js styles.less styles.css
</code></pre><p>This will compile styles.less file and save the result to styles.css file. The output file parameter is optional. If it is missing, less will output the result to <code>stdout</code>.</p>
                    <h1 class="docs-heading">Client-side usage &#xFF08;&#x5728;&#x5BA2;&#x6237;&#x7AEF;&#x4E2D;&#x4F7F;&#x7528;&#xFF09;<span class="anchor-target" id="client-side-usage-"></span>
                        <a href="#client-side-usage-" name="client-side-usage-" class="anchor glyphicon glyphicon-link"></a></h1>
                    <blockquote>
                        <p>&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x4F7F;&#x7528;less.js&#x5F00;&#x53D1;&#x662F;&#x5F88;&#x597D;&#x7684;&#xFF0C;&#x4F46;&#x4E0D;&#x63A8;&#x8350;&#x7528;&#x4E8E;&#x751F;&#x4EA7;&#x73AF;&#x5883;&#x4E2D;&#x3002;</p>
                    </blockquote>
                    <p>&#x6D4F;&#x89C8;&#x5668;&#x7AEF;&#x4F7F;&#x7528;&#x662F;&#x5728;&#x4F7F;&#x7528;LESS&#x5F00;&#x53D1;&#x65F6;&#x6700;&#x76F4;&#x89C2;&#x7684;&#x4E00;&#x79CD;&#x65B9;&#x5F0F;&#x3002;&#x5982;&#x679C;&#x662F;&#x5728;&#x751F;&#x4EA7;&#x73AF;&#x5883;&#x4E2D;&#xFF0C;&#x5C24;&#x5176;&#x662F;&#x5BF9;&#x6027;&#x80FD;&#x8981;&#x6C42;&#x6BD4;&#x8F83;&#x9AD8;&#x7684;&#x573A;&#x5408;&#xFF0C;<em> &#x5EFA;&#x8BAE;&#x4F7F;&#x7528;node&#x6216;&#x8005;&#x5176;&#x5B83;&#x7B2C;&#x4E09;&#x65B9;&#x5DE5;&#x5177;&#x5148;&#x7F16;&#x8BD1;&#x6210;CSS&#x518D;&#x4E0A;&#x7EBF;&#x4F7F;&#x7528; </em>&#x3002;</p>
                    <p>&#x9996;&#x5148;&#xFF0C;&#x5F15;&#x5165; <code>rel</code> &#x5C5E;&#x6027;&#x7684;&#x503C;&#x662F; <code>stylesheet/less</code> &#x7684; <code>.less</code> &#x6837;&#x5F0F;&#x8868; :</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">&quot;stylesheet/less&quot;</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text/css&quot;</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;styles.less&quot;</span> /&gt;</span>
</code></pre>
                    <p>&#x63A5;&#x4E0B;&#x6765;&#xFF0C;<a href="https://github.com/less/less.js/archive/master.zip">&#x4E0B;&#x8F7D; less.js</a> &#x5E76;&#x5C06;&#x5176;&#x5305;&#x6DB5;&#x5728;&#x60A8;&#x7684;&#x9875;&#x9762; <code>&lt;head&gt;</code> &#x5143;&#x7D20;&#x7684; <code>&lt;script&gt;&lt;/script&gt;</code> &#x6807;&#x8BB0;&#x4E2D;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;less.js&quot;</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre>
                    <h3 class="docs-heading">Tips &#x7279;&#x522B;&#x6CE8;&#x610F;<span class="anchor-target" id="client-side-usage--tips-"></span>
                        <a href="#client-side-usage--tips-" name="client-side-usage--tips-" class="anchor glyphicon glyphicon-link"></a></h3>
                    <ul>
                        <li>&#x786E;&#x4FDD;&#x5305;&#x6DB5; <code>.less</code> &#x6837;&#x5F0F;&#x8868;&#x5728; <code>less.js</code>  &#x811A;&#x672C; <strong>before</strong></li>
                        <li>&#x5F53;&#x4F60;&#x5F15;&#x5165;&#x591A;&#x4E2A; <code>.less</code> &#x6837;&#x5F0F;&#x8868;&#x65F6;&#xFF0C;&#x5B83;&#x4EEC;&#x90FD;&#x662F;&#x72EC;&#x7ACB;&#x7F16;&#x8BD1;&#x7684;&#x3002;&#x6240;&#x4EE5;&#xFF0C;&#x5728;&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x4E2D;&#x5B9A;&#x4E49;&#x7684;&#x53D8;&#x91CF;&#x3001;&#x6DF7;&#x5408;&#x3001;&#x547D;&#x540D;&#x7A7A;&#x95F4;&#x90FD;&#x4E0D;&#x4F1A;&#x88AB;&#x5176;&#x5B83;&#x7684;&#x6587;&#x4EF6;&#x5171;&#x4EAB;&#x3002;</li>
                    </ul>
                    <h2 class="docs-heading">Browser Options &#xFF08;&#x6D4F;&#x89C8;&#x5668;&#x7AEF;&#x8BBE;&#x7F6E;&#x53C2;&#x6570;&#xFF09;<span class="anchor-target" id="client-side-usage--browser-options-"></span>
                        <a href="#client-side-usage--browser-options-" name="client-side-usage--browser-options-" class="anchor glyphicon glyphicon-link"></a></h2>
                    <p>&#x4F60;&#x53EF;&#x4EE5;&#x5F15;&#x5165; <code>&lt;script src=&quot;less.js&quot;&gt;&lt;/script&gt;</code> <strong>&#x4E4B;&#x524D;</strong>&#x901A;&#x8FC7;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x5168;&#x5C40; <code>less</code> &#x5BF9;&#x8C61;&#x7684;&#x65B9;&#x5F0F;&#x6765;&#x6307;&#x5B9A;&#x53C2;&#x6570;&#xFF0C;&#x4F8B;&#x5982;&#xFF1A;</p>
<pre><code class="lang-html"><span class="hljs-comment">&lt;!-- set options before less.js script --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
  less = {
    env: <span class="hljs-string">&quot;development&quot;</span>,
    async: <span class="hljs-literal">false</span>,
    fileAsync: <span class="hljs-literal">false</span>,
    poll: <span class="hljs-number">1000</span>,
    functions: {},
    dumpLineNumbers: <span class="hljs-string">&quot;comments&quot;</span>,
    relativeUrls: <span class="hljs-literal">false</span>,
    rootpath: <span class="hljs-string">&quot;:/a.com/&quot;</span>
  };
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;less.js&quot;</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre>
                    <p>&#x6216;&#x4E3A;&#x4E86;&#x7B80;&#x5316;&#x5B83;&#x4EEC;&#x53EF;&#x4EE5;&#x5728; <code>script</code> &#x548C; <code>link</code> &#x6807;&#x8BB0;&#x4E0A;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;&#xFF08;&#x9700;&#x8981;&#x7684;JSON.parse&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;&#x6216;polyfill&#xFF09;&#x3002;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;less.js&quot;</span> <span class="hljs-attribute">data-poll</span>=<span class="hljs-value">&quot;1000&quot;</span> <span class="hljs-attribute">data-relative-urls</span>=<span class="hljs-value">&quot;false&quot;</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">data-dump-line-numbers</span>=<span class="hljs-value">&quot;all&quot;</span> <span class="hljs-attribute">data-global-vars</span>=<span class="hljs-value">&apos;{ myvar: &quot;#ddffee&quot;, mystr: &quot;\&quot;quoted\&quot;&quot; }&apos;</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">&quot;stylesheet/less&quot;</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">&quot;text/css&quot;</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;less/styles.less&quot;</span>&gt;</span>
</code></pre>
                    <p>&#x66F4;&#x591A; <a href="usage/#using-less-in-the-browser-setting-options">&#x6D4F;&#x89C8;&#x5668;&#x7AEF;&#x8BBE;&#x7F6E;&#x53C2;&#x6570;</a></p>

                </div>





                <div class="docs-section">
                    <div class="page-header">
                        <h1 class="docs-heading">&#x83B7;&#x5F97; Less.js<span class="anchor-target" id="download-options"></span>
                            <a href="#download-options" name="download-options" class="anchor glyphicon glyphicon-link"></a></h1>
                    </div>

                    <h2 class="docs-heading">Browser downloads<span class="anchor-target" id="download-options-browser-downloads"></span>
                        <a href="#download-options-browser-downloads" name="download-options-browser-downloads" class="anchor glyphicon glyphicon-link"></a></h2>
                    <a class="btn btn-default" href="https://raw.github.com/less/less.js/v2.2.0/dist/less.min.js">Download Less.js v2.2.0</a>

                    <div class="docs-dl-options">
                        <h4 class="docs-heading"><a href="https://github.com/less/less.js/archive/v2.2.0.zip">Download source code</a><span class="anchor-target" id="download-options--download-source-code-https-github-com-less-less-js-archive-v2-2-0-zip-"></span>
                            <a href="#download-options--download-source-code-https-github-com-less-less-js-archive-v2-2-0-zip-" name="download-options--download-source-code-https-github-com-less-less-js-archive-v2-2-0-zip-" class="anchor glyphicon glyphicon-link"></a></h4>
                        <p>&#x76F4;&#x63A5;&#x4ECE; GitHub &#x4E0A;&#x4E0B;&#x8F7D;&#x6700;&#x65B0;&#x7684; Less.js &#x6E90;&#x7801;&#x3002;</p>
                        <h4 class="docs-heading"><a href="https://github.com/less/less.js.git">Clone or fork via GitHub</a><span class="anchor-target" id="download-options--clone-or-fork-via-github-https-github-com-less-less-js-git-"></span>
                            <a href="#download-options--clone-or-fork-via-github-https-github-com-less-less-js-git-" name="download-options--clone-or-fork-via-github-https-github-com-less-less-js-git-" class="anchor glyphicon glyphicon-link"></a></h4>
                        <p>&#x901A;&#x8FC7; GitHub &#x514B;&#x9686;&#x6216; fork &#x672C;&#x9879;&#x76EE;&#xFF01;</p>
                        <h4 class="docs-heading"><a href="http://bower.io">Install with Bower</a><span class="anchor-target" id="download-options--install-with-bower-http-bower-io-"></span>
                            <a href="#download-options--install-with-bower-http-bower-io-" name="download-options--install-with-bower-http-bower-io-" class="anchor glyphicon glyphicon-link"></a></h4>
                        <p>&#x901A;&#x8FC7;&#x8FD0;&#x884C;&#x4E0B;&#x9762;&#x7684;&#x547D;&#x4EE4;&#x884C;&#x5B89;&#x88C5;Less.js&#x9879;&#x76EE;&#x548C;JavaScript&#xFF1A;</p>
<pre><code class="lang-bash">bower install less
</code></pre>

                    </div>

                    <div class="cdn-options">
                        <h3 class="docs-heading"><a href="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js">Less CDN</a><span class="anchor-target" id="download-options--less-cdn-cdnjs-cloudflare-com-ajax-libs-less-js-2-2-0-less-min-js-"></span>
                            <a href="#download-options--less-cdn-cdnjs-cloudflare-com-ajax-libs-less-js-2-2-0-less-min-js-" name="download-options--less-cdn-cdnjs-cloudflare-com-ajax-libs-less-js-2-2-0-less-min-js-" class="anchor glyphicon glyphicon-link"></a></h3>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js&quot;</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre>

                    </div>
                </div>




                <div class="docs-section">
                    <div class="page-header">
                        <h1 class="docs-heading">&#x8BB8;&#x53EF;&#x8BC1; FAQs<span class="anchor-target" id="license-faqs"></span>
                            <a href="#license-faqs" name="license-faqs" class="anchor glyphicon glyphicon-link"></a></h1>
                    </div>
                    <p class="lead">Less.js &#x57FA;&#x4E8E; Apache 2 &#x8BB8;&#x53EF;&#x8BC1;&#x53D1;&#x5E03;&#xFF08;<a href="https://github.com/less/less.js/issues/1029">&#x6211;&#x4EEC;&#x6253;&#x7B97;&#x5C06;&#x6765;&#x91C7;&#x7528;&#x53CC;&#x8BB8;&#x53EF;&#x8BC1;&#x65B9;&#x5F0F;</a>&#xFF09;&#x3002;&#x7248;&#x6743;&#x6240;&#x6709; 2009-2015&#xFF0C;Alexis Sellier &#x548C; Less &#x6838;&#x5FC3;&#x5C0F;&#x7EC4;&#xFF08;&#x89C1;&#x4E0A;&#x9762;&#xFF09;&#x3002;&#x603B;&#x7ED3;&#x5982;&#x4E0B;&#xFF1A;</p>
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <h4>&#x8D4B;&#x4E88;&#x4F60;&#x7684;&#x6743;&#x529B;&#xFF1A;</h4>
                            <ul>
                                <li>&#x4EFB;&#x610F;&#x4E0B;&#x8F7D;&#x5E76;&#x4F7F;&#x7528; Less.js &#x7684;&#x5168;&#x90E8;&#x6216;&#x90E8;&#x5206;&#x4EE3;&#x7801;&#xFF0C;&#x53EF;&#x4EE5;&#x7528;&#x4E8E;&#x4E2A;&#x4EBA;&#x3001;&#x516C;&#x53F8;&#x5185;&#x90E8;&#x6216;&#x5546;&#x4E1A;&#x76EE;&#x7684;</li>
                                <li>&#x5C06; Less.js &#x5305;&#x542B;&#x5230;&#x4F60;&#x7684;&#x4EA7;&#x54C1;&#x4E2D;</li>
                            </ul>
                        </div>
                        <div class="col-12 col-lg-6">
                            <h4>&#x4E25;&#x7981;&#xFF1A;</h4>
                            <ul>
                                <li>&#x5728;&#x6CA1;&#x6709;&#x58F0;&#x660E;&#x7248;&#x6743;&#x5F52;&#x5C5E;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x4F7F;&#x7528; Less.js &#x4E2D;&#x7684;&#x4EFB;&#x4F55;&#x4EE3;&#x7801;&#x7247;&#x6BB5;</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <h4>&#x4F60;&#x7684;&#x4E49;&#x52A1;&#xFF1A;</h4>
                            <ul>
                                <li>&#x5982;&#x679C;&#x4F60;&#x7684;&#x4EA7;&#x54C1;&#x4E2D;&#x5305;&#x542B; Less.js&#xFF0C;&#x5FC5;&#x987B;&#x5305;&#x542B;&#x4E00;&#x4EFD; Less.js &#x7684;&#x7248;&#x6743;&#x534F;&#x8BAE;</li>
                                <li>&#x5728;&#x4F60;&#x5305;&#x542B;&#x4E86; Less.js &#x7684;&#x4EA7;&#x54C1;&#x4E2D;&#x660E;&#x786E;&#x58F0;&#x660E; Less.js &#x7684;&#x7248;&#x6743;&#x5F52; Less &#x6838;&#x5FC3;&#x5C0F;&#x7EC4;</li>
                            </ul>
                        </div>
                        <div class="col-12 col-lg-6">
                            <h4>&#x4E0D;&#x9700;&#x8981;&#xFF1A;</h4>
                            <ul>
                                <li>&#x5728;&#x4F60;&#x7684;&#x4EA7;&#x54C1;&#x4E2D;&#x5305;&#x542B; Less&#x3002;js &#x81EA;&#x8EAB;&#x6216;&#x4F60;&#x6240;&#x4FEE;&#x6539;&#x7684;&#x6E90;&#x7801;</li>
                                <li>&#x63D0;&#x4EA4;&#x4F60;&#x5BF9; Less.js &#x6240;&#x505A;&#x7684;&#x4FEE;&#x6539;&#x5230; Less.js &#x9879;&#x76EE;&#xFF08;&#x6211;&#x4EEC;&#x8FD8;&#x662F;&#x9F13;&#x52B1;&#x63D0;&#x4EA4;&#x5BF9; Less.js &#x7684;&#x6539;&#x8FDB;&#xFF09;</li>
                            </ul>
                        </div>
                    </div>
                    <p>&#x5B8C;&#x6574;&#x7684; Less.js &#x7248;&#x6743;&#x4FE1;&#x606F;&#x4F4D;&#x4E8E; <a href="https://github.com/less/less.js/blob/master/LICENSE">&#x9879;&#x76EE;&#x4ED3;&#x5E93;&#x5185;</a>&#xFF0C;&#x8BF7;&#x53C2;&#x8003;&#x3002;</p>
                </div>

            </div>
        </div>
    </div>
</div>


<footer class="footer" role="contentinfo">
    <div class="container">
        <div class="bs-social">
            <ul class="bs-social-buttons">
                <li>
                    <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=less&amp;repo=less.js&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
                </li>
                <li>
                    <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=less&amp;repo=less.js&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
                </li>
            </ul>
        </div>

        <p>Less.js and these docs are maintained by <a href="about/#team">the core less team</a>.</p>
        <p>Documentation source code released under the <a href="https://github.com/less/less-docs/blob/master/LICENSE-MIT" target="_blank">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <ul class="footer-links">
            <li>Currently v2.2.0</li>

            <li class="muted">&#xB7;</li>
            <li><a href="https://github.com/less/less.js/issues">Less.js Issues</a></li>
            <li class="muted">&#xB7;</li>
            <li><a href="https://github.com/less/less-docs/issues?&amp;state=open">Less Docs Issues</a></li>
            <li class="muted">&#xB7;</li>
            <li><a href="https://github.com/less/less.js/blob/master/CHANGELOG.md">Changelog</a></li>

        </ul>
    </div>
</footer>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?f8be45191941378fa9c93900b0d0be23";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-43525385-6', 'auto');
    ga('send', 'pageview');

</script>




<!-- Core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.2.0/holder.min.js"></script>
<script src="public/js/application.js"></script>




</body>
</html>